<template>

  <div class="common-layout">
      <el-container>
        <el-header>
          <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            :ellipsis="false"
            @select="handleSelect"
            :background-color="`var(--color-menu-background)`"
            :text-color="`var(--color-text)`"
            active-text-color="#ffd04b"
          >
            <el-menu-item index="1">
              Logo
            </el-menu-item>

            <div class="flex-grow"></div>

            <el-menu-item index="2" @click="jump('shareClipboard')">
              共享粘贴板
            </el-menu-item>
            
            <el-sub-menu index="3">
              <template #title>图片操作</template>
              <el-menu-item index="3-1" @click="jump('base64ToPic')">base64图片互转</el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="4">
              <template #title>数据操作</template>
              <el-menu-item index="4-1" @click="jump('json2FormData')">json转postman-formdata参数</el-menu-item>
              <el-menu-item index="4-2" @click="jump('jsonOps')">json操作</el-menu-item>
            </el-sub-menu>
            
            <el-sub-menu index="5">
              <template #title>其他</template>
              <el-menu-item index="5-1">esb文件生成报文</el-menu-item>
              <el-menu-item index="5-1" @click="jump('timestampTransform')">时间戳转换</el-menu-item>
              <el-menu-item index="5-1" @click="jump('unicode2CN')">unicode转中文</el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-header>

        <el-main>
          <div class="main-class">

            <el-breadcrumb separator="/" v-if="$route.name !== 'homeData'">
              <el-breadcrumb-item v-for="item in breadcrumbDataStore.getBreadcrumbData" :key="item.name" :to="{ name:item.routeName }">{{ item.name }}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>

          <RouterView/>
        </el-main>
      </el-container>
  </div>



  </template>
  
  <script lang="js" setup>
  import { ref, onMounted } from 'vue'
  import { ElMessage } from 'element-plus'
  import { useRoute, useRouter } from 'vue-router';
  // 引入面包屑store
  import { useBreadcrumbData } from '@/stores/breadcrumb'
  
  const router = useRouter();
  const route = useRoute();
  const activeIndex = ref('1')
  const handleSelect = () => {
    
  }

  const breadcrumbDataStore = useBreadcrumbData();

  const open = () => {
    ElMessage('This is a message.');
    console.log(route.name);
  }

  const jump = (name) => {
    router.push({name});
  }

  onMounted(() => {
    console.log(route.name);
  })
  </script>

  <style>
.flex-grow {
  flex-grow: 1;
}


  .main-class{
    padding: 0px 20px;
  }

  .title{
    margin: 20px 0px;
  }
</style>
  